<!--我的消息-->
<template>
	<view class="view_box">
		<navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
		<view class="list_block">
			<view>
				<view class="item_bock" style="display: block; position: relative">
					<view class="title">* 手机号</view>
					<view class="item_content text_32">{{ customerInfo.mobile }}</view>
				</view>
				<view class="item_bock">
					<view class="title">* 姓名</view>
					<view class="item_content input">
						<input class="text_32" type="text" @input="inputFullName" :value="fullName" placeholder="请输入姓名"
							placeholder-class="p_style" maxlength="30" />
					</view>
				</view>
				<view class="item_bock">
					<view class="title">* 称谓</view>
					<view class="item_content input select-box">

						<genderPicker :isIos="isIos" @onGenderConfirm="onGenderConfirm" :genderArray="genderArr"
							:genderIndex="genderIndex">
							<view style="
							 position: absolute;
							 width: 90vw;
							 height: 64rpx;
							 opacity: 0;
							 font-size: 32rpx;
							 font-weight: 500;
							 color: #757575;
							 font-family: FrankNew-Regular, NotoSansSC-Regular;
							   ">
							</view>
						</genderPicker>
						<view class="uni-input text_32" :class="genderValue ? 'text_32' : 'p_style'" v-if="genderValue">
							{{ genderValue }}
						</view>
						<view class="uni-input" :class="genderValue ? '' : 'p_style'" v-if="!genderValue">请选择称谓</view>
						<image class="arrow_img" :src="arrowImg"></image>
					</view>
				</view>

				<view class="item_bock margin_bottom_0" v-if="viewShow">
					<view class="title">* 生日</view>
					<view class="item_content input select-box" v-if="!memberDetails.birthDay">
						<datePicker :isIos="isIos" @onCancel="onCancel" @onConfirm="onConfirm" :startDate="startDate"
							:endDate="endDate" :defaultValue="defaultDate">
							<view style="
                  position: absolute;
                  width: 90vw;
                  height: 64rpx;
                  opacity: 0;
                ">{{ memberBirthday }}</view>
						</datePicker>
						<view class="uni-input text_32" v-if="memberBirthday">{{
							memberBirthday
						}}</view>
						<view class="uni-input" :class="memberBirthday ? '' : 'p_style'" v-if="!memberBirthday">请选择生日
						</view>
						<image class="arrow_img" :src="arrowImg"></image>
					</view>
					<view class="item_content text_32" v-else>
						{{ memberDetails.birthDay }}
					</view>
				</view>
				<view class="item_bock margin_bottom_0" v-else>
					<view class="title">* 生日</view>
					<view class="item_content">
						{{ memberDetailsBirthDay }}
					</view>
				</view>
				<view class="title2">*部分会员将有机会享生日惊喜，生日提交后不可修改</view>
				<view class="item_bock margin_bottom_0">
					<view class="title">常驻地</view>
					<view class="item_content input select-box flex_space_between ">
						<areaPicker :isIos="isIos" @areaArray="areaPickerArray" ref="areaPicker" :showArea="false">
						</areaPicker>
						<view class="uni-input text_32 text_ellipsis" v-if="provinceName" @click="openAddressPicker">
							{{ province ? province.areaName : "省" }}
							{{ city ? city.areaName : "市" }}
						</view>
						<view style="display: flex; justify-content: flex-end; width: 100%" @click="openAddressPicker">
							<view class="uni-input" :class="provinceName ? '' : 'p_style'"
								v-if="!provinceText && !cityText && !province">
								请选择常驻地
							</view>
							<view class="uni-input text_32 textOverflow" :class="provinceName ? '' : 'text_32'"
								v-else-if="!!provinceText && !!cityText && !province">
								{{ provinceText }} {{ cityText }}
							</view>
							<image class="arrow_img" :src="arrowImg"></image>
						</view>
					</view>
				</view>
				<view class="title2">*部分会员将有机会受邀参与当地举办的品牌活动</view>
				<view class="btnStyle" @click="submitInfo(true)">确认提交</view>
			</view>
			<view class="dialog" v-if="showBirthdayTip">
				<view class="dialog-bg">
					<image @click.stop="closeDialog"
						src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/X.png"
						class="top-close" mode="widthFix" />
					<view class="dialog-content">
						<view class="dialog-text">
							<image class="model-icon"
								src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/member_icon.png"
								mode="widthFix"></image>
							<view class="text">查询到本会员账号存在此前已在其他麦卡伦官方渠道登记的会员信息，现已为您同步至当前信息栏中。已登记的生日信息无法修改，感谢您的支持。</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<loading :showLoaded.sync="showLoaded"></loading>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
	</view>
</template>
<script>
import api from "@/api/api";
import NavBar from "../../components/common/navbar";
import DatePicker from "./components/uniDatePicker.vue";
import Loading from "../../components/common/loading";
import {
	SYSTEM_INFO,
	CUSTOMER_INFO
} from "@/utils/constant";
import AreaPicker from "./components/areaPicker.vue";
import genderPicker from "./components/genderPicker.vue";
export default {
	config: {
		navigationBarTitleText: "我的会员",
	},
	components: {
		navBar: NavBar,
		datePicker: DatePicker,
		areaPicker: AreaPicker,
		loading: Loading,
		genderPicker
	},
	data() {
		return {
			isShowCustomNavBar: true,
			// 组件所需的参数
			navbarData: {
				showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
				title: "商品详情", //导航栏 中间的标题
				hideHome: true,
			},
			customerInfo: {},
			showJoinMember: false,
			memberDetails: {},
			preview: false,
			fullName: "",
			canEdit: false,
			genderArr: [{
				key: "Male",
				genderValue: "男",
			},
			{
				key: "Female",
				genderValue: "女",
			},
			],
			genderIndex: 0,
			genderValue: "",
			memberBirthday: "",
			//补充生日相关
			startDate: "1940-01-01",
			endDate: "2022-09-20",
			defaultDate: "1990-01-01",
			pickerDate: "",
			userAvatarUrl: "https://100000063-1252208446.file.myqcloud.com/images/Davata.png",
			updateAvatarUrl: "",
			province: "",
			city: "",
			provinceCode: "",
			cityCode: "",
			provinceName: "",
			cityName: "",
			showBirthdayCheck: false,
			showMsg: "",
			memberDetailsBirthDay: "",
			viewShow: true,
			cityText: "",
			provinceText: "",
			showBirthdayTip: false,
			showLoaded: true,
			nowPages: "",
			changeName: false,
			nickName: "",
			inputFocus: false,
			arrowImg: "",
			isIos: false
		};
	},

	computed: {
		storeName() {
			return this.$store.state.storeName;
		},
	},
	onLoad(option) {
		let that = this;
		const {
			arrowRightSvgImg
		} = require("./imgs.svg.js");
		this.arrowImg = arrowRightSvgImg();
		const accountInfo = uni.getAccountInfoSync();
		//设置滚动高度
		let systemInfo = uni.getStorageSync(SYSTEM_INFO);
		that.customerInfo = uni.getStorageSync(CUSTOMER_INFO);
		let pages = getCurrentPages();
		var currPage = pages[pages.length - 1];
		this.nowPages = currPage.route;
		that.customerInfo = uni.getStorageSync(CUSTOMER_INFO);
		if (!!that.customerInfo.jwt) {
			that.getMemberDetail(that.customerInfo.jwt);
			that.$commonFunction
				.commonLoginNew()
				.then(function (res) {
					let customerNewInfo = uni.getStorageSync(CUSTOMER_INFO);
					that.nickName = customerNewInfo.nickName;
					that.userAvatarUrl = customerNewInfo.avatarUrl;
					setTimeout(() => {
						that.showLoaded = false;
					}, 500);
				})
				.catch((err) => {
					that.nickName = that.customerInfo.nickName;
					that.userAvatarUrl = that.customerInfo.avatarUrl;
					setTimeout(() => {
						that.showLoaded = false;
					}, 500);
				});
		}
		that.showLoaded = false;

		this.isIos = wx.getSystemInfoSync().system.includes('iOS') && wx.getSystemInfoSync()?.safeArea?.top > 20;

	},
	onShow() {
		this.$commonSensors.commonPageView("MemberInfoCompetePageView");
		getApp().cl_tracker.track("mini_program_view", {
			path: this.nowPages,
			pageName: "个人信息",
		});
	},
	methods: {
		/**
		 * 展示弱提示
		 * @param {Object} msg 文案
		 */
		handleShowTextToast(msg) {
			try {
				this.$refs.toastPopup.showToast(msg);
			} catch (e) { }
		},
		/**
		 * 若提示按钮点击回调
		 * @param {Object} data.type 类型：confirm确定，cancel取消
		 * @param {Object} data.callBackData 呼气弹窗时传入的数据
		 */
		onToastPopupClick(data) { },
		onGenderConfirm(e) {
			var that = this;
			that.genderIndex = e.genderIndex;
			that.genderValue = that.genderArr[that.genderIndex].genderValue;
			that.$commonSensors.memberInfoCompetePageClick("称谓", false);
		},
		updateName() {
			this.changeName = true;
			this.inputFocus = true;
			this.$commonSensors.memberInfoCompetePageClick("昵称", false);
		},
		openAddressPicker() {
			this.$refs.areaPicker.openAddressPicker();
		},

		areaPickerArray(province, city, area) {
			let that = this;
			this.province = province;
			this.city = city;
			this.provinceName = province.areaName;
			this.cityName = city.areaName;
			this.provinceCode = province.areaCode;
			this.cityCode = city.areaCode;
			that.$commonSensors.memberInfoCompetePageClick("常驻地", false);
		},
		onChooseAvatar: function (e) {
			let that = this;
			that.updateAvatarUrl = e.detail.avatarUrl;
			uni.uploadFile({
				url: api.uploadFiles,
				// url: 'https://api.sandbox.cloud.efashionchina.com/cloud/basic-storage-tencent-cos/file?bucketName=100000000',
				filePath: that.updateAvatarUrl,
				name: "file", // 固定 // 请求头一定要加，否则 iOS 图片上传会失败
				header: {
					"content-type": "multipart/form-data",
				},
				success(res) {
					that.updateAvatarUrl = JSON.parse(res.data).data.url;
					that.editAvatarInfo();
				},
				fail: function (err) { },
				complete(res) {
					that.$commonSensors.memberInfoCompetePageClick("头像", false);
				},
			});
		},
		onConfirm(e) {
			let that = this;
			this.pickerDate = e.dateValue;
			if (that.pickerDate) {
				that.memberBirthday = that.pickerDate;
				let dataArr = that.pickerDate.split("-");
			}
			that.$commonSensors.memberInfoCompetePageClick("生日", false);
		},
		confirmName(e) {
			let value = e.detail.value;
			this.editAvatarInfo(value);
		},
		editAvatarInfo: async function (name) {
			let that = this;
			let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
			let avatarUrl = that.updateAvatarUrl || that.userAvatarUrl;
			let nickName = name || customerInfo.nickName;
			let jwt = uni.getStorageSync(CUSTOMER_INFO).jwt;
			const json = await api.memberUpdate({
				method: "PUT",
				header: {
					jwt: jwt,
				},
				query: {
					avatarUrl: avatarUrl,
					nickName: nickName,
				},
			});
			if (json.code === 1000) {
				that.changeName = false;
				that.userAvatarUrl = avatarUrl;
				that.nickName = nickName;
				that.updateAvatarUrl = "";
				//刷新customer接口数据里的头像
				that.$commonFunction.commonLoginNew().then(function (res) {
					let customerNewInfo = uni.getStorageSync(CUSTOMER_INFO);
				});
			}
		},
		openAddressPicker() {
			this.$refs.areaPicker.openAddressPicker();
		},

		areaPickerArray(province, city, area) {
			let that = this;
			this.province = province;
			this.city = city;
			this.provinceName = province.areaName;
			this.cityName = city.areaName;
			this.provinceCode = province.areaCode;
			this.cityCode = city.areaCode;
			that.$commonSensors.memberInfoCompetePageClick("常驻地", false);
		},

		/**
		 * 获取会员信息
		 *
		 * @param jwt
		 * @return {Promise<void>}
		 */
		getMemberDetail: async function (jwt) {
			let that = this;
			const memberDetailsResult = await api.getMemberDetails({
				header: {
					jwt: jwt || uni.getStorageSync(CUSTOMER_INFO).jwt,
				},
			});
			if (memberDetailsResult.code == 1000) {
				const phoneNumberReg = /^1\d{10}$/;
				if (!phoneNumberReg.test(memberDetailsResult.data.mobile)) {
					// 非大陆手机号按照非会员对待,重新入会
					uni.removeStorageSync('memberDetails');
					that.canEdit = false;
					return;
				}
				that.memberDetails = memberDetailsResult.data;
				that.fullName = !!memberDetailsResult.data.fullName ?
					memberDetailsResult.data.fullName :
					"";
				that.genderValue = !!memberDetailsResult.data.gender &&
					memberDetailsResult.data.gender == "Male" ?
					"男" :
					!!memberDetailsResult.data.gender &&
						memberDetailsResult.data.gender == "Female" ?
						"女" :
						"";
				if (memberDetailsResult.data.gender == "Female") {
					that.genderIndex = 1;
				} else {
					that.genderIndex = 0;
				}
				that.provinceText = !!memberDetailsResult.data.province ?
					memberDetailsResult.data.province :
					"";
				that.cityText = !!memberDetailsResult.data.city ?
					memberDetailsResult.data.city :
					"";
				that.memberDetailsBirthDay = that.memberDetails.birthDay;
				that.memberLevelName =
					that.memberDetails.memberLevel &&
						that.memberDetails.memberLevel.levelName ?
						that.memberDetails.memberLevel.levelName :
						"";
				if (that.memberDetails.isActive == "Inactive") {
					that.showJoin = 1;
				} else {
					that.showJoin = 0;
				}
				// 是否可以修改用户信息
				if (
					!that.memberDetails.birthDay ||
					that.memberDetails.gender == "Unknown" ||
					!that.memberDetails.gender ||
					!that.memberDetails.fullName
				) {
					that.canEdit = true;
				}
				if (that.memberDetails.birthDay) {
					that.memberBirthday = that.memberDetails.birthDay;
				}
				if (that.memberDetails.fullName) {
					that.fullName = that.memberDetails.fullName;
				}
				if (that.memberDetails.gender == "Unknown") {
					that.genderValue = "";
				}
				if (
					that.memberDetails.additionalFields &&
					that.memberDetails.additionalFields.crm_birthday &&
					that.memberDetails.additionalFields.crm_birthday != "0"
				) {
					that.showBirthdayTip = true;
				} else {
					that.showBirthdayTip = false;
				}
			} else {
				that.canEdit = false;
			}
		},

		genderChange(e) {
			var that = this;
			that.genderIndex = e.detail.value;
			that.genderValue = that.genderArr[that.genderIndex].genderValue;
			that.$commonSensors.memberInfoCompetePageClick("性别", false);
		},

		/**
		 * 出生日期
		 */
		onCancel(e) {

		},

		inputFullName(e) {
			let that = this;
			that.fullName = e.detail.value;
		},
		// 修改用户信息
		async submitInfo(flag) {
			let that = this;
			let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
			if (!that.fullName) {
				that.handleShowTextToast("请填写姓名");
				return false;
			}
			if (!that.genderValue) {
				that.handleShowTextToast("请选择性别");
				return false;
			}
			if (!that.memberBirthday) {
				that.handleShowTextToast("请选择生日");
				return false;
			}
			if (!that.province && !that.provinceText) {
				that.handleShowTextToast("请选择常驻地");
				return false;
			}
			let paramJson = {
				fullName: that.fullName,
				gender: that.genderArr[that.genderIndex].key,
				province: that.provinceName,
				city: that.cityName,
				additionalFields: {
					crm_birthday: "0",
				},
			};
			if (that.viewShow == true) {
				paramJson.birthDay = that.memberBirthday;
			} else {
				paramJson.birthDay = that.memberDetailsBirthDay;
			}
			const editMemberActive = await api.memberUpdate({
				method: "PUT",
				header: {
					jwt: customerInfo.jwt,
				},
				query: paramJson,
			});

			if (editMemberActive.code == 1000) {
				that.canEdit = false;
				that.getMemberDetail();
				if (flag) {
					that.handleShowTextToast("保存成功");
					let clTrackPrams = {
						c_area: "个人信息",
					};
					getApp().commonClTrack("c_ebmp_my_information_save", clTrackPrams);
				}

				that.$commonSensors.memberInfoCompetePageClick("保存", true);
			} else if (editMemberActive.code == -1004 && flag) {
				setTimeout(() => {
					that.submitInfo(false);
				}, 3000);

				that.showMsg = editMemberActive.msg;
				that.memberDetailsBirthDay = editMemberActive.data.birthDay;
				that.viewShow = false;
				that.showBirthdayCheck = true;
				that.fullName = editMemberActive.data.fullName;
				that.genderIndex =
					editMemberActive.data.gender == "Male" ?
						0 :
						editMemberActive.data.gender == "Female" ?
							1 :
							that.genderIndex;
				that.genderValue =
					editMemberActive.data.gender == "Male" ?
						"男" :
						editMemberActive.data.gender == "Female" ?
							"女" :
							that.genderValue;
				that.province.areaName = editMemberActive.data.province;
				that.city.areaName = editMemberActive.data.city;
				that.$commonSensors.memberInfoCompetePageClick("保存", false);
			} else {
				that.handleShowTextToast(editMemberActive.msg);
				that.$commonSensors.memberInfoCompetePageClick("保存", false);
			}
		},
		async closeDialog() {
			this.showBirthdayTip = false
		},
	},
};
</script>

<style lang="less">
.view_box {
	font-family: FrankNew-Regular, NotoSansSC-Regular;
	height: 100vh;
}

.dialog {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9;

	.dialog-bg {
		height: 492rpx;
		width: 654rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 2px;
		transform: translate(-50%, -50%);
		position: relative;


		.top-close {
			position: absolute;
			right: 48rpx;
			top: 64rpx;
			width: 32rpx;
			height: 32rpx;
		}

		.mcl-guanbi1 {
			text-align: right;
			font-size: 18px;
			font-weight: 600;
			padding: 12px;
		}

		.dialog-text {
			text-align: center;

			.dialog-title {
				font-size: 36rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
				font-family: NotoSansSC-Medium;
			}

			.model-icon {
				width: 182rpx;
				height: 56rpx;
				margin-bottom: 20rpx;
			}
		}

		.title {
			padding-top: 40rpx;
			text-align: center;
			// text-decoration: underline;
			font-size: 16px;
			font-weight: 800;
			font-family: NotoSansSC-Medium;
		}

		.btn {
			display: inline-block;
			background: #000000;
			text-align: center;
			padding: 16rpx 70rpx;
		}

		.text {
			color: #757575;
			padding: 0 64rpx;
			text-align: center;
			font-size: 28rpx;
			line-height: 48rpx;
		}
	}
}

.list_block {
	padding: 0 48rpx;
	margin-top: 64rpx;
	font-family: FrankNew-Medium, NotoSansSC-Medium;
}

.item_bock {
	padding: 24rpx 32rpx;
	background: #fafafa;
	height: 164rpx;
	margin-bottom: 24rpx;

	.input {
		flex: 1;

		input {
			color: #757575;
			font-size: 32rpx;
			font-weight: 500;
			font-family: FrankNew-Regular, NotoSansSC-Regular;
		}
	}
}

.title {
	color: #000000;
	font-size: 28rpx;
	font-weight: 500;
	line-height: 40rpx;
	position: relative;
	font-family: NotoSansSC-Medium;
}

.item_content {
	color: #757575;
	margin-top: 8rpx;
	height: 64rpx;
	line-height: 64rpx;
}

.active {
	color: #444;
	border-bottom: 5rpx solid #444;
}

.birthday {
	display: block;
	padding-bottom: 0;
}

.select-box {
	display: flex;
	position: relative;

	.uni-input {
		position: relative;
		width: 100%;
		line-height: 64rpx;
		height: 64rpx;
	}
}

.textOverflow {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.icon-jiantouxiangyou {
	width: 10px;
	right: 16px;
	top: 0;
	position: absolute;
}

.tag {
	font-size: 10px;
	border-bottom: none;

	.text {
		font-size: 22rpx;
	}
}

.mcl-tanhao {
	margin: -8rpx 10rpx 0 0;
	display: inline-block;
	vertical-align: middle;
}

.tipUserInfo {
	position: relative;
	display: flex;
	height: 120px;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.headImg {
		margin-bottom: 20rpx;
	}

	.avatar-name {
		display: flex;
		height: 40rpx;
		line-height: 46rpx;
		font-size: 28rpx;

		.weui-input {
			width: 550rpx;
			font-size: 28rpx;
			text-align: center;
		}
	}

	.edit-name {
		position: relative;
		font-size: 28rpx;

		.avatar-name-edit {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: -38rpx;
			bottom: -6rpx;
			background-image: url("https://100000063-1252208446.file.myqcloud.com/images/r9.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}

	.image {
		width: 140rpx;
		height: 140rpx;
		display: block;
		border-radius: 50%;
		overflow: hidden;
		border: 3rpx solid #fff;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
}

.avatar-wrapper {
	width: 140rpx;
	height: 140rpx;
	display: block;
	border-radius: 50%;
	overflow: hidden;
	background-image: url("https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/avatar.jpg");
	border: 3rpx solid #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%);
}

.avatarUrl {}

.btnStyle {
	width: 100%;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 48rpx 16rpx 48rpx 48rpx;
	box-sizing: content-box;
	background-color: #000;
	color: #fff;
	font-size: 28rpx;
	font-weight: 500;
	margin-top: 200rpx;
	font-family: NotoSansSC-Medium;
}

.title2 {
	font-size: 24rpx;
	font-weight: normal;
	line-height: 40rpx;
	color: #757575;
	margin-top: 16rpx;
	margin-bottom: 24rpx;
}

.u-avatar {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	z-index: 2;
	bottom: 10rpx;
	right: -1rpx;
	border-radius: 50%;
	overflow: hidden;

	button {
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding: 0;
		background-image: url(https://100000063-1252208446.file.myqcloud.com/images/r10.png);
		background-size: 100% 100%;
	}
}

.mcl-edit {
	font-size: 45rpx;
}

.text_32 {
	font-size: 32rpx;
	font-weight: 500;
	line-height: 64rpx;
	height: 64rpx;
	color: #757575;
}

.p_style {
	color: #c6c6c6;
	font-size: 32rpx;
	font-weight: 500;
	font-family: FrankNew-Medium, NotoSansSC-Medium;
}

.arrow_img {
	width: 64rpx;
	height: 64rpx;
	flex-shrink: 0;
	transform: rotate(90deg);
}

.flex_space_between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.margin_bottom_0 {
	margin-bottom: 0 !important;
}

.text_ellipsis {
	display: -webkit-box;
	word-break: break-all;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.birthday_tip_text {
	color: #757575;
	font-size: 28rpx;
	line-height: 48rpx;
	margin-top: 20rpx;
}

.birthday_tip_close {
	width: 64rpx;
	height: 64rpx;
	position: absolute;
	right: 24rpx;
	top: 24rpx;
	z-index: 19;
}

.birthday_tip_img {
	width: 182rpx;
	height: 57rpx;
	display: block;
	margin: 0 auto;
}

.birthday_tip_bg {
	width: 654rpx;
	height: 492rpx;
	background-color: #fff;
	position: absolute;
	top: 50%;
	margin-top: -246rpx;
	left: 48rpx;
	padding: 128rpx 64rpx 0 64rpx;
}
</style>